<script setup lang="ts">
import { ref, computed } from 'vue'
import { useCoinStore } from '@/store/coin'
import { formatNumberWithThousands } from '@/utils/utils'
defineProps({
  width: {
    type: String,
    default: ''
  },
  currentInfo: {
    type: Object,
    default: () => { }
  }
})
const priceInfo = computed(() => {
  return useCoinStore().getPrice(useCoinStore().coinInfo.name)
})
const emit = defineEmits(['close'])
const isHiden = ref(false)

</script>

<template>
  <div :style="{ width: isHiden ? '14px' : width }" class=" dark:hover:border-[#333b47] leading-[12px] rounded-[4px] p-[4px] flex items-center flex-wrap cursor-pointer
    hover:border-[#ededed] border-solid border-[1px] border-[transparent]">
    <div :class="[isHiden ? '' : 'mr-[6px]']" @click="isHiden = !isHiden"
      class="iconfont icon-you text-[12px]  text-[#BFBFBF] font-bold  dark:text-[#707a8a] "
      :style="{ 'transform': !isHiden ? 'rotate(90deg)' : 'rotate(0deg)' }" style="transition: 0.5s;"></div>
    <template v-if="!isHiden">
      <template v-if="useCoinStore().coinInfo.inCharts">
        <div class="flex-shrink-0 text-[#9c9c9c]  mt-[2px] mr-[10px] dark:text-[#707a8a]">{{ currentInfo.time }}
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] dark:text-[#707a8a] mr-[10px]">开:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[currentInfo.open > currentInfo.close ? 'text-fall' : 'text-rise']">{{
            priceInfo?.unitDecimals ? formatNumberWithThousands(currentInfo.open.toFixed(priceInfo?.unitDecimals)) :
              formatNumberWithThousands(currentInfo.open)
          }}
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">高:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[currentInfo.open > currentInfo.close ? 'text-fall' : 'text-rise']">{{
            priceInfo?.unitDecimals ? formatNumberWithThousands(currentInfo.high.toFixed(priceInfo?.unitDecimals)) :
              formatNumberWithThousands(currentInfo.high)
          }}
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">低:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[currentInfo.open > currentInfo.close ? 'text-fall' : 'text-rise']">{{
            priceInfo?.unitDecimals ? formatNumberWithThousands(currentInfo.low.toFixed(priceInfo?.unitDecimals)) :
              formatNumberWithThousands(currentInfo.low)
          }}
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">收:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[currentInfo.open > currentInfo.close ? 'text-fall' : 'text-rise']">{{
            priceInfo?.unitDecimals ? formatNumberWithThousands(currentInfo.close.toFixed(priceInfo?.unitDecimals)) :
              formatNumberWithThousands(currentInfo.close)
          }}
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">涨跌幅:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[currentInfo.open > currentInfo.close ? 'text-fall' : 'text-rise']">{{
            Number(((currentInfo.close /
              currentInfo.open) - 1) * 100).toFixed(2)
          }}%
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">振幅:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[currentInfo.open > currentInfo.close ? 'text-fall' : 'text-rise']">{{
            Number((currentInfo.high - currentInfo.low) / currentInfo.close * 100).toFixed(2)
          }}%
        </div>
      </template>
      <template v-if="!useCoinStore().coinInfo.inCharts">
        <div class="flex-shrink-0 text-[#9c9c9c]  mt-[2px] mr-[10px] dark:text-[#707a8a]">{{
          useCoinStore().infoPrice.time }}
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] dark:text-[#707a8a] mr-[10px]">开:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[useCoinStore().infoPrice.open > useCoinStore().infoPrice.close ? 'text-fall' : 'text-rise']">
          {{ priceInfo?.unitDecimals ?
            formatNumberWithThousands(Number(useCoinStore().infoPrice.open).toFixed(priceInfo?.unitDecimals)) :
            formatNumberWithThousands(useCoinStore().infoPrice.open)
          }}
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">高:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[useCoinStore().infoPrice.open > useCoinStore().infoPrice.close ? 'text-fall' : 'text-rise']">
          {{ priceInfo?.unitDecimals ?
            formatNumberWithThousands(Number(useCoinStore().infoPrice.high).toFixed(priceInfo?.unitDecimals)) :
            formatNumberWithThousands(useCoinStore().infoPrice.high)
          }}
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">低:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[useCoinStore().infoPrice.open > useCoinStore().infoPrice.close ? 'text-fall' : 'text-rise']">
          {{ priceInfo?.unitDecimals ?
            formatNumberWithThousands(Number(useCoinStore().infoPrice.low).toFixed(priceInfo?.unitDecimals)) :
            formatNumberWithThousands(useCoinStore().infoPrice.low)
          }}
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">收:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[useCoinStore().infoPrice.open > useCoinStore().infoPrice.close ? 'text-fall' : 'text-rise']">
          {{ priceInfo?.unitDecimals ?
            formatNumberWithThousands(Number(useCoinStore().infoPrice.close).toFixed(priceInfo?.unitDecimals)) :
            formatNumberWithThousands(useCoinStore().infoPrice.close)
          }}
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">涨跌幅:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[useCoinStore().infoPrice.open > useCoinStore().infoPrice.close ? 'text-fall' : 'text-rise']">
          {{
            Number(((Number(useCoinStore().infoPrice.close) /
              Number(useCoinStore().infoPrice.open)) - 1) * 100).toFixed(2)
          }}%
        </div>
        <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">振幅:</div>
        <div class="flex-shrink-0  mt-[2px] mr-[10px]"
          :class="[useCoinStore().infoPrice.open > useCoinStore().infoPrice.close ? 'text-fall' : 'text-rise']">
          {{
            Number((Number(useCoinStore().infoPrice.high) - Number(useCoinStore().infoPrice.low)) /
              Number(useCoinStore().infoPrice.close) * 100).toFixed(2)
          }}%
        </div>
      </template>
      <!-- <div class="flex-shrink-0 text-[#9c9c9c] mr-[10px] dark:text-[#707a8a]">成交量:</div>
      <div class="flex-shrink-0 text-[#9c9c9c] mt-[2px] dark:text-[#707a8a]">{{ currentInfo.volume.toFixed(2) }}
      </div> -->
    </template>
  </div>
</template>

<style scoped></style>